<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

const touristNum = ref<number>(216908)
const touristMax = ref<number>(999999)
const touristNumChArr = ref<string[]>([])
const chartsRef = ref<any>()

const getNumChArr = () => {
  touristNumChArr.value = touristNum.value.toString().split('')
}

const initCharts = () => {
  let mycharts = echarts.init(chartsRef.value)
  //设置实例的配置项
  mycharts.setOption({
    //标题组件
    title: {
      text: '水球图',
    },
    //x|y轴组件
    xAxis: {},
    yAxis: {},
    //系列:决定你展示什么样的图形图标
    series: {
      type: 'liquidFill', //系列
      data: [0.6, 0.4, 0.2], //展示的数据
      color: ['#2E4F96', '#1666C8', '#1594E9'],
      waveAnimation: true, //动画
      animationDuration: 3,
      animationDurationUpdate: 0,
      radius: '90%', //半径
      outline: {
        //外层边框设置
        show: true,
        borderDistance: 8,
        itemStyle: {
          color: '#1594E9',
          borderColor: '#1666C8',
          borderWidth: 8,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.25)',
        },
      },
    },
    //布局组件
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  })
}
onMounted(() => {
  getNumChArr()
  initCharts()
})
</script>

<template>
  <div class="data">
    <div class="top">
      <p class="title">实时游客统计</p>
      <p class="right">
        可预约总量
        <span>{{ touristMax }}</span>
        人
      </p>
    </div>

    <div class="num">
      <span v-for="(num, index) in touristNumChArr" :key="index">
        {{ num }}
      </span>
      <span>人</span>
    </div>
    <div class="charts" ref="chartsRef"></div>
  </div>
</template>

<style scoped lang="scss">
$title-height: 32px;

.data {
  flex: 1.2;

  .top {
    font-size: 20px;
    line-height: $title-height;
    color: #fff;

    .title {
      &::after {
        top: $title-height;
        left: 0;
        display: block;
        width: 68px;
        height: 7px;
        content: '';
        background: url('@/assets/images/data_screen/figure.png') no-repeat;
        background-size: cover;
      }
    }

    .right {
      float: right;
      padding-right: 10px;

      span {
        color: #29fcff;
      }
    }
  }

  .num {
    display: flex;
    width: 100%;
    padding: 10px;
    margin-top: $title-height;
    font-size: 25px;
    font-weight: bold;
    color: #29fcff;

    span {
      display: inline-block;
      flex: 1;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: url('@/assets/images/data_screen/1.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .charts {
    width: 100%;
    height: 220px;
  }
}
</style>
